/* 呼吸效果
-------------------------- */
@mixin infinite-blink($time, $color1, $color2, $width1, $width2) {
  animation: animated-border $time infinite;

  @keyframes animated-border {
    0% {
      box-shadow: 0 0 0 $width1 $color1;
    }

    100% {
      box-shadow: 0 0 0 $width2 $color2;
    }
  }
}

/* 边框渐变色
-------------------------- */
@mixin border-gradient(
  $bg,
  $borderWidth,
  $time,
  $borderColor:
  linear-gradient(
      60deg,
      #f79533,
      #f37055,
      #ef4e7b,
      #a166ab,
      #5073b8,
      #1098ad,
      #07b39b,
      #6fba82
    )
) {
  background: $bg;
  position: relative;
  border-radius: var($borderWidth);

  &::after {
    content: "";
    position: absolute;
    top: calc(-1 * var($borderWidth));
    left: calc(-1 * var($borderWidth));
    height: calc(100% + var($borderWidth) * 2);
    width: calc(100% + var($borderWidth) * 2);
    background: $borderColor;
    border-radius: calc(2 * var($borderWidth));
    z-index: -1;
    animation: animated-gradient $time ease alternate infinite;
    background-size: 300% 300%;
  }

  @keyframes animated-gradient {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  }
}

/* 边框hover动画
-------------------------- */
@mixin border-over($color) {
  position: relative;
  vertical-align: middle;

  &::before,
  &::after {
    box-sizing: inherit;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
  }

  transition: color 0.25s;

  &--draw {
    &::before,
    &::after {
      // Set border to invisible, so we don't see a 4px border on a 0x0 element before the transition starts
      border: 2px solid transparent;
      width: 0;
      height: 0;
    }

    // This covers the top & right borders (expands right, then down)
    &::before {
      top: 0;
      left: 0;
    }

    // And this the bottom & left borders (expands left, then up)
    &::after {
      bottom: 0;
      right: 0;
    }

    &:hover {
      color: $color;

      &::before,
      &::after {
        width: 100%;
        height: 100%;
      }

      &::before {
        border-top-color: $color; // Make borders visible
        border-right-color: $color;
        transition: width 0.25s ease-out,
          // Width expands first
          height 0.25s ease-out 0.25s; // And then height
      }

      &::after {
        border-bottom-color: $color; // Make borders visible
        border-left-color: $color;
        transition: border-color 0s ease-out 0.5s,
          // Wait for ::before to finish before showing border
          width 0.25s ease-out 0.5s,
          // And then exanding width
          height 0.25s ease-out 0.75s; // And finally height
      }
    }

    &--meet {
      &:hover {
        color: $color;
      }

      // Start ::after in same position as ::before
      &::after {
        top: 0;
        left: 0;
      }

      // Change colors
      &:hover {
        &::before {
          border-top-color: $color;
          border-right-color: $color;
        }

        &::after {
          border-bottom-color: $color;
          border-left-color: $color;
          transition: // Animate height first, then width
            height 0.25s ease-out, width 0.25s ease-out 0.25s;
        }
      }
    }
  }

  &--center {
    &:hover {
      color: $color;
    }

    // Set up base styles, we're going to scale instead of animating width/height
    &::before,
    &::after {
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      transform-origin: center; // Ensure scaling is done from the center (expands outwards)
    }

    // scale3d(<scale-horizontal>, <scale-vertical>, <scale-depth>);
    &::before {
      border-top: 2px solid $color;
      border-bottom: 2px solid $color;
      transform: scale3d(0, 1, 1); // Shrink only width
    }

    &::after {
      border-left: 2px solid $color;
      border-right: 2px solid $color;
      transform: scale3d(1, 0, 1); // Shrink only height
    }

    &:hover {
      &::before,
      &::after {
        transform: scale3d(1, 1, 1); // Show full-size
        transition: transform 0.5s;
      }
    }
  }

  &--spin-center {
    border-radius: 100%;
    box-shadow: none;

    &:hover {
      color: $color;
    }

    &::before,
    &::after {
      top: 0;
      left: 0;
      border-radius: 100%;
    }

    &::before {
      border: 2px solid transparent; // We're animating border-color again
    }

    &:hover::before {
      border-top-color: $color; // Show borders
      border-right-color: $color;
      border-bottom-color: $color;

      transition: border-top-color 0.15s linear,
        // Stagger border appearances
        border-right-color 0.15s linear 0.1s,
        border-bottom-color 0.15s linear 0.2s;
    }

    &::after {
      border: 0 solid transparent; // Makes border thinner at the edges? I forgot what I was doing
    }

    &:hover::after {
      border-top: 2px solid $color; // Shows border
      border-left-width: 2px; // Solid edges, invisible borders
      border-right-width: 2px; // Solid edges, invisible borders
      transform: rotate(270deg); // Rotate around circle
      transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s; // Solid edge post-rotation
    }
  }
}
